<template>
  <form-dialop
    :title="$t('systemSettings.BackupSetting')"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
  >
    <template #content>
      <el-form ref="form" :model="formData" :rules="formRule" label-width="80px" v-loading="loading">
        <el-form-item :label="$t('systemSettings.BackupTo')" prop="backupTo">
          <el-radio-group v-model="formData.backupTo">
            <el-radio :label="'Local'">{{ $t('systemSettings.Local') }}</el-radio>
            <el-radio :label="'NFSServer'">{{ $t('systemSettings.NFSServer') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.backupTo === 'NFSServer'" :label="$t('systemSettings.NFSUrl')" prop="nfsUrl">
          <el-input v-model="formData.nfsUrl" :placeholder="$t('systemSettings.NFSUrlPlaceholder')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('systemSettings.ReservedBackups')" prop="reservedBackups">
          <el-input-number v-model="formData.reservedBackups" controls-position="right" :min="1" :max="30"></el-input-number>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading" name="resource-pool-form-submit-button">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
export default Vue.extend({
  components: {
    FormDialop
  },
  computed: {
    formRule() {
      const backupTo = [
        { required: true, message: (this as any).$t('systemSettings.backupToRequired'), trigger: 'blur' }
      ];

      const nfsUrl = [
        { required: true, message: (this as any).$t('systemSettings.nfsUrlRequired'), trigger: 'blur' }
      ];

      const reservedBackups = [
        { required: true, message: (this as any).$t('systemSettings.reservedBackupsRequired'), trigger: 'blur' },
        { min: 1, max: 30, message: (this as any).$t('systemSettings.reservedBackupsRange'), trigger: 'blur' }
      ]

      if ((this as any).formData.backupTo === 'NFSServer') {
        return {
          backupTo,
          nfsUrl,
          reservedBackups
        }
      } else {
        return {
          backupTo,
          reservedBackups
        }
      }
    }
  },
  props: {
    loadingMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    },
    submitMethod: {
      type: Function,
      default() {
        return (formData: any) => Promise.resolve();
      }
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      formData: {
        backupTo: 'Local',
        nfsUrl: '',
        reservedBackups: 1
      }
    }
  },
  methods: {
    init() {
      (this as any).loading = true;
      (this as any).visible = true;
      (this as any).loadingMethod().then((res: any) => {
        (this as any).formData = res;
      }).finally(() => {
        (this as any).loading = false;
      });
    },
    submit() {
      ((this as any).$refs.form as any).validate((valid: any) => {
        if (valid) {
          (this as any).loading = true;
          (this as any).submitMethod((this as any).formData).then(() => {
            (this as any).handleClose();
          }).finally(() => {
            (this as any).loading = false;
          });
        }
      });
    },
    handleClose() {
      (this as any).formData = {
        backupTo: 'Local',
        nfsUrl: '',
        reservedBackups: 1
      };
      this.loading = false;
      (this as any).visible = false;
    }
  }
})
</script>
